<!doctype html>
<html>
    <head>
        <title>Cubejelix Interpolation</title>
        <script
            type="text/javascript"
            src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"
        ></script>
        <script type="text/javascript" src="../../chroma.js"></script>
        <style type="text/css">
            input[type='number'] {
                width: 40px;
            }
        </style>
    </head>
    <body>
        start <input type="number" id="start" value="300" step="20" /> rotations
        <input type="number" id="rot" value="-1.5" step="0.1" /> gamma
        <input type="number" id="gamma" value="1" step="0.1" /> l min/max
        <input type="number" id="lmin" value="0" step="0.1" min="0" />
        <input type="number" id="lmax" value="1" step="0.1" max="1" />
        sat min/max
        <input type="number" id="smin" value="1" step="0.1" min="0" />
        <input type="number" id="smax" value="1" step="0.1" min="0" />

        <hr />
        <script type="text/javascript">
            $('input').on('change', update);

            function v(id) {
                return +$('#' + id).val();
            }

            var j = 0;

            function update() {
                var steps = 200,
                    totalW = 800;
                var sat = [v('smin'), v('smax')];
                $('.scale').remove();
                var ch = chroma.cubehelix(
                    v('start'),
                    v('rot'),
                    sat[0] != sat[1] ? sat : sat[0],
                    v('gamma'),
                    [v('lmin'), v('lmax')]
                );
                var c = $('<div />').addClass('scale').appendTo('body');
                for (var i = 0; i < steps; i++) {
                    $('<div/>')
                        .css({
                            display: 'inline-block',
                            width: totalW / steps + 'px',
                            height: '100px',
                            background: ch(i / (steps - 1)).hex()
                        })
                        .appendTo(c);
                }
            }

            update();
        </script>
    </body>
</html>
